import { Button, Checkbox, Form, Input, message } from 'antd';
import React, { useContext, useState } from "react"
import styles from './index.module.scss';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { loadRouter } from '@/router';
import { mobxState } from '@/data';
import loadTabs from '@/components/tabs/loadTabs';
import { getUserPermission, reloadDictJson } from '@/common';
import * as  loginApi from "@/api/login"


function Login() {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)



  const onFinish = async ({ userId, passWord }) => {

    try {
      const params = {
        userId: userId,
        passWord: passWord,
      }
      const { data } = await loginApi.loginUser(params)
      console.log("登录成功", data)
      sessionStorage.token = data?.token || null;
      const userInfo = { userName: data.userInfo.userName, unitCode: "", userId: userId, roleCode: "" }
      sessionStorage.userInfo = JSON.stringify(userInfo)
      mobxState.updateUserInfo({
        userId: userInfo.userId, userName: userInfo.userName
      })
      getUserPermission(userInfo.userId).then(data => {
        sessionStorage.setItem("routes", JSON.stringify(data.menus))
        mobxState.updatePermissionList(data.permissionList);
        loadRouter({ routerList: data.menus });
        loadTabs();
        reloadDictJson();
      }).catch(error => {
        console.log('获取用户权限出错了', error)
      })
    } finally {
      setLoading(false)
    }
  }





  return (
    <div className={styles.loginView}>
      <div className="mask">
        <div className="oval"></div>
        <div className="oval-2"></div>
        <div className="Rectangle-1"></div>
        <div className="Rectangle-2"></div>
        <div className="Rectangle-3"></div>
        <div className="Rectangle-4"></div>
      </div>

      <div className='center'>
        <div className="background"></div>
        <div className="form">
          <div className="title">
          </div>
          <div className="form-container">
            <Form
              name="normal_login"
              className="login-form"
              form={form}
              onFinish={onFinish}
            >
              <Form.Item
                name="userId"
                rules={[
                  {
                    required: true,
                    message: '请输入登录用户名',
                  },
                ]}
              >
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
              </Form.Item>
              <Form.Item
                name="passWord"
                rules={[
                  {
                    required: true,
                    message: '请输入密码',
                  },
                ]}
              >
                <Input
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="请输入密码"
                />
              </Form.Item>
              <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox>记住我</Checkbox>
                </Form.Item>

                <a className="login-form-forgot" href="">
                  重置密码
                </a>
              </Form.Item>

              <Form.Item>
                <Button loading={loading} type="primary" htmlType="submit" className="login-form-button">
                  登录
                </Button>
                或 <a href="">现在注册</a>
              </Form.Item>
            </Form>
          </div>
        </div>

      </div>
    </div>
  )
}

export default Login
